<template>
<div class="content-all">
    <img :src="user.avatar" alt="">
    <ul>
        <li>姓名:   {{this.user.username}}</li>
        <li>昵称:   {{this.user.nickname}}</li>
        <li>学校:   {{this.user.school}}</li>
        <li>性别:   {{this.user.gender}}</li>
        <li>密码:  <input type="password" readonly="readonly" :value="this.user.password"/></li>
        <el-button  @click="dialogVisible = true">修改</el-button>
    </ul> 
    <el-dialog title="提示" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"  class="demo-ruleForm">
        <el-form-item label="旧密码" prop="oldPass">
            <el-input type="password" v-model="ruleForm.oldPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPass">
            <el-input type="password" v-model="ruleForm.newPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
            <el-input v-model="ruleForm.checkPass"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
        </el-form-item>
        </el-form>
    </el-dialog>
            
</div>
</template>


<script>
import {put}from'../../utils/fecth'
export default {
    name:'pcbottom',
    data() {
        var oldPass = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('密码不能为空'));
        }
        // setTimeout(() => {
        //   if (!Number.isInteger(value)) {
        //     callback(new Error('请输入数字值'));
        //   } else {
        //     if (value < 18) {
        //       callback(new Error('必须年满18岁'));
        //     } else {
        //       callback();
        //     }
        //   }
        // }, 1000);
      };
      var newPass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('newPass');
          }
          callback();
        }
      };
      var checkPass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.newPass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
        return {
            user:JSON.parse(localStorage.getItem('a')),
            dialogVisible: false,
            formLabelWidth: '120px',
            ruleForm: {
                oldPass: '',
                newPass: '',
                checkPass: '',
            },
        rules: {
          oldPass: [
            { validator: oldPass, trigger: 'blur' }
          ],
          newPass: [
            { validator: newPass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: checkPass, trigger: 'blur' }
          ]
        }
      };
    },
    created() {
        this.user2 = Object.assign(this.user)
    },
    methods: {
        async submitForm(){
          const data = await put('user/changePassword',{
            oldPassword:this.ruleForm.oldPass,
            newPassword:this.ruleForm.checkPass
          })
          if(data.success==true){
          this.dialogVisible = !this.dialogVisible
            console.log(11)
          }
          // this.user.password = this.ruleForm.checkPass
          console.log(data)
        }
    },
   
}
</script>

<style lang="scss">
.content-all{
    display: flex;
    justify-content: center;
    img{
        width: 70px;
        height: 70px;
        border-radius: 50%;
    }
    ul{
        list-style: none;
        margin: 0 0 0 20px;
        padding: 0;
        width: 400px;
        li{
            width: 190px;
            height: 50px;
            line-height: 50px;
            float: left;
            text-align: left;
            display: flex;
            input{
              border: none;
              outline: none;
            }

        }
    }
}
</style>